<template>
  <div class="page-list-live">
    <PageList>
      <template #header>{{ title }}</template>
      <template #filter>
        <ListFilter :form="topFilter" :select-value="true" @changItemHandler="changHandler" @search="handleSearch" @reset="handleReset"></ListFilter>
      </template>
      <template #tips>
        <el-button icon="el-icon-delete" type="danger" @click="batchDeletion">批量删除</el-button>
      </template>
      <template #table>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol" @selectChange="handleSelectionChange">
          <template slot="col1" slot-scope="stData">
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="$imgUrl + stData.row.file" :preview-src-list="[$imgUrl + stData.row.file]"></el-image>
            </div>
          </template>
          <template slot="col2" slot-scope="scope">
            <el-button icon="el-icon-delete" style="color: red;" :loading="scope.row.loadingDel" size="mini" type="text" @click="handleRowDel(scope.row)">删除</el-button>
          </template>
        </ListTable>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import ListFilter from '@/components/ListFilter'
  import { safetyCatTracking, alertOverMan, alertOverTime, alertSensor, alertVideo, area } from '@/api/api'
  export default {
    components: { ListFilter },
    mixins: [listMixin],
    data() {
      return {
        title: '报警消息',
        selectValue: 5,
        // 临时图片
        url: '/files/20201017174207_singleHole.jpg',
        // 报警类型
        stateValue: null,
        deleteList: {
          id: ''
        },
        topFilter: {
          deptName: {
            label: '报警类型选择', placeholder: '请选择报警类型', type: 'select', arr: [
              { label: '环境检测报警', value: 1 },
              { label: '超员报警', value: 2 },
              { label: '超时报警', value: 3 },
              { label: '视频报警', value: 4 },
              { label: '安全帽报警', value: 5 },
            ]
          },
          createdTime: { label: '进入隧道时间', type: 'date', arr: ['createdTime', 'createdTime'] }
        },
        tableData: [],
        tableCol: [],
        areaData: []
      }
    },
    watch: {
      stateValue: function (newValue, oldValue) {
        let that = this
        switch (newValue) {
          case 1:
            that.tableCol = [
              { type: 'selection' },
              {
                prop: 'createdTime', label: '报警时间', formatter: function (row, col, cell) {
                  return this.$format(cell, false)
                }.bind(this)
              },
              { prop: 'alertType', label: '报警类型' },
              { prop: 'areaName', label: '区域' },
              { prop: 'sensor.name', label: '设备名称' },
              { prop: 'sensor.sensorStation.name', label: '基站名称' },
              { prop: 'unit', label: '单位' },
              { prop: 'alertValue', label: '报警值' },
              { prop: 'normalVaule', label: '恢复值' },
              {
                prop: 'alertEndTime', label: '恢复时间', formatter: function (row, col, cell) {
                  return this.$format(cell, false)
                }.bind(this)
              },
              { label: '操作', custom: 'col2' }
            ]
            break
          case 2:
            that.tableCol = [
              { type: 'selection' },
              {
                prop: 'createdTime', label: '报警时间', formatter: function (row, col, cell) {
                  return this.$format(cell, false)
                }.bind(this)
              },
              { prop: 'alertType', label: '报警类型' },
              { prop: 'areaName', label: '区域' },
              { prop: 'limitation', label: '区域人数设定' },
              { prop: 'realCount', label: '报警人数' },
              { prop: 'overCount', label: '超出人数' },
              { label: '操作', custom: 'col2' }
            ]
            break
          case 3:
            that.tableCol = [
              { type: 'selection' },
              {
                prop: 'createdTime', label: '报警时间', formatter: function (row, col, cell) {
                  return this.$format(cell, false)
                }.bind(this)
              },
              { prop: 'alertType', label: '报警类型' },
              { prop: 'areaName', label: '区域' },
              { prop: 'employee.name', label: '员工姓名' },
              { prop: 'employee.rfid', label: 'RFID' },
              { prop: 'employee.accessCardID', label: '门禁ID' },
              {
                prop: 'enterTime', label: '进入隧道时间', formatter: function (row, col, cell) {
                  return this.$format(cell, false)
                }.bind(this)
              },
              { prop: 'duration', label: '本次进洞时长' },
              { prop: 'overTime', label: '超出时间' },
              { label: '操作', custom: 'col2' }
            ]
            break
          case 4:
            that.tableCol = [
              { type: 'selection', prop: '全选' },
              {
                prop: 'createdTime', label: '报警时间', formatter: function (row, col, cell) {
                  return this.$format(cell, false)
                }.bind(this)
              },
              { prop: 'alertType', label: '报警类型' },
              { prop: 'areaName', label: '区域' },
              { prop: 'deviceName', label: '设备名称' },
              { prop: 'eventType', label: '事件类型' },
              { prop: 'content', label: '事件描述信息' },
              { label: '操作', custom: 'col2' }
            ]
            break
          case 5:
            that.tableCol = [
              { type: 'selection', label: '全选' },
              {
                prop: 'code', label: '抓拍时间', formatter: function (row, col, cell) {
                  return this.$format(cell, false)
                }.bind(this)
              },
              { prop: 'name', label: '抓拍功能项' },
              { prop: 'limitation', label: '所在区域' },
              { prop: 'code', label: '抓拍设备名称' },
              { prop: 'code', label: '抓拍头像缩略图', custom: 'col1' },
              { prop: 'code', label: '操作', custom: 'col2' }
            ]
            break

          default:
            that.tableCol = [
              { type: 'selection', label: '全选' },
              { prop: 'code', label: '抓拍时间' },
              { prop: 'name', label: '抓拍功能项' },
              { prop: 'limitation', label: '所在区域' },
              { prop: 'code', label: '抓拍设备名称' },
              { prop: 'code', label: '抓拍头像缩略图', custom: 'col1' },
              { prop: 'code', label: '操作', custom: 'col2' }
            ]
            break
        }
        this.getList()
      }
    },
    mounted() {
      let routeId = this.$route.query.id
      if (routeId) {
        this.stateValue = Number(routeId)
        this.title = '安全帽检测'
      } else {
        this.stateValue = 1
        this.title = '报警消息'
      }
      this.$store.dispatch('user/setDefult', this.stateValue)

    },
    beforeDestroy() {
      this.$store.dispatch('user/setDefult', 0)
    },
    methods: {
      // 获取区域
      async getArea(query) {
        try {
          const obj = query || { pageIndex: 1, pageSize: 10, orderBy: 'createdTime', orderByAscent: false }
          const { data: { items: resData, count, pageIndex } } = await area('post', obj, false)
          this.areaData = []
          this.areaData = resData.map(item => {
            item.loadingEdit = false
            item.loadingDel = false
            return item
          })
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      // 下拉框改变
      changHandler(value) {
        if (value.key === 'deptName') {
          this.stateValue = value.val
        }
      },
      // 批量删除
      batchDeletion() {
        this.$_delConfirm('部门', () => {
          this.delRowReq(this.deleteList)
        })
      },
      // 选中事件
      handleSelectionChange(event) {
        if (event.length > 0) {
          let ary = []
          event.forEach(item => {
            ary.push(item.id)
          })
          if (ary.length > 1) {
            this.deleteList.id = ary.join(',')
          } else {
            this.deleteList.id = ary[0]
          }
        } else {
          this.deleteList.id = ''
        }
      },
      // 请求列表数据
      async getList(query) {
        if (query && query.search && query.search.length > 1) {
          let i = query.search.findIndex(item => {
            return item.key == "deptName"
          })
          if (i > -1) {
            query.search.splice(i, 1)
          }
        }
        await this.getArea()
        this.tableLoading = true
        let that = this
        try {
          let obj = query || { pageIndex: 1, pageSize: 10, orderBy: 'createdTime', orderByAscent: false }
          let resValue = {}
          switch (this.stateValue) {
            case 1:
              await alertSensor('post', obj, false).then((res) => {
                that.setList(res, that)
              })
              break
            case 2:
              await alertOverMan('post', obj, false).then((res) => {
                that.setList(res, that)
              })
              break
            case 3:
              await alertOverTime('post', obj, false).then((res) => {
                that.setList(res, that)
              })
              break
            case 4:
              await alertVideo('post', obj, false).then((res) => {
                that.setList(res, that)
              })
              break
            case 5:
              await safetyCatTracking('post', obj, false).then((res) => {
                that.setList(res, that)
              })
              break

            default:
              await safetyCatTracking('post', obj, false).then((res) => {
                that.setList(res, that)
              })
              break
          }

        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      // 给列表赋值
      setList(resValue, that) {
        const { data: { items: resData, count, pageIndex } } = resValue
        that.tableData = []
        that.tableData = resData.map(item => {
          item.loadingEdit = false
          item.loadingDel = false
          return item
        })
        this.tableData.forEach(item => {
          var i = this.areaData.findIndex(val => {
            return item.areaId == val.id
          })
          if (i > -1) {
            item.areaName = this.areaData[i].name
            item.limitation = this.areaData[i].limitation
          }

        })

        that.$nextTick(() => {
          that.$refs['RefListTable'].update({ page: pageIndex, count })
          that.tableLoading = false
        })
      },
      // 详情
      handleRowDetails(row) {
        this.$refs['detailsAttendance'].open(row, '/Job')
      },
      async delRowReq(row) {
        try {
          let obj = { id: row.id, value: null }
          switch (this.stateValue) {
            case 1:
              await alertSensor("delete", obj, true)
              break
            case 2:
              await alertOverMan("delete", obj, true)
              break
            case 3:
              await alertOverTime("delete", obj, true)
              break
            case 4:
              await alertVideo("delete", obj, true)
              break
            case 5:
              await safetyCatTracking("delete", obj, true)
              break
          }
          row.loadingDel = false
          await this.getList()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } catch (err) {
          row.loadingDel = false
          console.error('handleRowDel err: ', err)
        }
      },
      handleRowDel(row) {
        row.loadingDel = true
        this.$_delConfirm(
          '部门',
          () => {
            this.delRowReq(row)
          },
          () => {
            row.loadingDel = false
          }
        )
      }
    }
  }
</script>
